<template>
  <view class="container">
    <view class="order-list">
      <view 
        v-for="(order, index) in orders" 
        :key="order.id" 
        class="order-item"
      >
        <view class="order-header">
          {{ order.orderName }} - {{ order.orderStatus }}
        </view>
        <view class="order-content">
          {{ order.setmealName }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const BASE_URL = 'http://localhost:8188'

export default {
  data() {
    return {
      orders: [],
      phone: ''
    }
  },

  onLoad() {
    const userInfo = uni.getStorageSync('userInfo')
    if (userInfo && userInfo.phone) {
      this.phone = userInfo.phone
      this.loadOrders()
    }
  },

  methods: {
    loadOrders() {
      uni.request({
        url: `${BASE_URL}/api/order/myOrder`,
        method: 'GET',
        data: {
          phone: this.phone,
          status: ''
        },
        success: (res) => {
          console.log('原始响应：', res)
          if (res.statusCode === 200 && res.data.code === 200) {
            this.orders = res.data.data
            console.log('设置后的订单数据：', this.orders)
          }
        }
      })
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
}

.order-item {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 20rpx;
  border-radius: 10rpx;
}

.order-header {
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.order-content {
  font-size: 24rpx;
  color: #666;
}
</style> 